<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/lib/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="${path}/static/lib/layui/css/layui.css" media="all">
</head>
<body>
	
	
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
	  <legend>添加信息</legend>
	</fieldset>
	<form class="layui-form layui-form-pane" id="ajax_form" method="post" onsubmit="return false">
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品名称</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" placeholder="商品名称" class="layui-input">
	    </div>
	  </div>
	  <label class="layui-form-label">商品分类</label>
	    <div class="layui-input-inline">
	      <select id="topCategoryId" lay-filter="topCategoryFilter">
	        <option value="">请选择一级分类</option>
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select name="categoryId" id="secondCategoryId">
	        <option value="">请选择商品</option>
	      </select>
	    </div>
	  
	   <div class="layui-form-item">
	    <label class="layui-form-label">价格</label>
	    <div class="layui-input-inline">
	      <input type="text" name="price" lay-verify="required" placeholder="价格" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">库存</label>
	    <div class="layui-input-inline">
	      <input type="text" name="stock" lay-verify="required" placeholder="库存" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-form-item" pane="">
	    <label class="layui-form-label">状态</label>
	    <div class="layui-input-block">
	      <input type="radio" name="status" value="1" title="在售" checked="">
	      <input type="radio" name="status" value="2" title="下架">
	      <input type="radio" name="status" value="3" title="删除">
	    </div>
	  </div>
	  
	  <div class="layui-form-item" pane="">
  	     <label class="layui-form-label">商品主图</label>
	  	  <div class="layui-upload layui-input-block">
			  <div class="layui-upload-list">
			  		<input type="hidden" name="mainImage" id="mainImgInputId"> 
			    <img class="layui-upload-img" id="mainImgId" width="150px" height="150px">
			    <p id="demoText"></p>
			  <button type="button" class="layui-btn" id="uploadBtnId">上传图片</button>
			  </div>
		  </div> 
	  </div>
	  
<!-- 	  <div class="layui-form-item"> -->
<!-- 	    <label class="layui-form-label">子图片</label> -->
<!-- 	    <div class="layui-input-inline"> -->
<!-- 	      <input type="text" name="subImages" lay-verify="required" placeholder="子图片" class="layui-input"> -->
<!-- 	    </div> -->
<!-- 	  </div> -->
	  
	 <div class="layui-form-item">
	    <label class="layui-form-label">商品详情</label>
	    <div class="layui-input-block">
	      <textarea placeholder="请输入内容" name="detail" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  s
	 <div class="layui-form-item">
	    <label class="layui-form-label">子标题</label>
	    <div class="layui-input-inline">
	      <input type="text" name="subtitle" lay-verify="required" placeholder="子标题" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">创建时间</label>
	    <div class="layui-input-inline">
	      <input type="text" name="createTime"  class="layui-input" id="createTimeId" placeholder="yyyy-MM-dd">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">修改时间</label>
	    <div class="layui-input-inline">
	      <input type="text" name="updateTime"  class="layui-input" id="updateTimeId" placeholder="yyyy-MM-dd"> 
	    </div>
	  </div>
	  
	   <div class="layui-form-item">
<!-- 	    <button class="layui-btn" onclick="submitForm()" value="添加">跳转式提交</button> -->
	    <div class="layui-input-block">
	       <button class="layui-btn" onclick="submitForm()" value="添加">提交</button>
	       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>

	<script src="${path}/static/lib/jquery-1.11.3.js"></script>
	<script src="${path}/static/lib/mylayer.js"></script>
	<script src="${path}/static/lib/util.js"></script>
	<script src="${path}/static/lib/layui/layui.js"></script>
	<script src="${path}/static/lib/kindeditor/kindeditor.js"></script>
	<script src="${path}/static/lib/kindeditor/lang/zh_CN.js"></script>
	<script>
	
	var form;
	layui.use(['form', 'upload', 'layer'], function(){
		form = layui.form;
	    var layer = layui.layer;
	    var upload = layui.upload;
	  
	  form.render('select'); //刷新select选择框渲染
	  
	  form.on("select(topCategoryFilter)",function(data){
		  console.log(data.elem);// select原始dom对象
		  console.log(data.value);// 被选中的option的value值
		// 根据一级分类加载二级分类
		$.ajax({
			url : "${path}/category/selectSecondCategory.action",
			type : "POST",
			dataType : "json",
			data : {"topCategoryId" : data.value},
			success : function(jsonObj){
				console.log(jsonObj);
				$("#secondCategoryId").empty();
				// var data = jsonObj.data;
				$("#secondCategoryId").append("<option value=''>请选择商品</option>");
				$(jsonObj.data).each(function(i, value){
					// <option value="001">山东省</option>
					var html = "<option value='" + this.id + "'>" + this.name + "</option>";
					$("#secondCategoryId").append(html);
					
				});
				form.render('select'); //刷新select选择框渲染
			}
		});
	  });
	  
	  
	//普通图片上传
	  var uploadInst = upload.render({
	    elem: '#uploadBtnId'
	    ,url: '${path}/upload/uploadImg.action'
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#mainImgId').attr('src', result); //图片链接（base64）
	      });
	    }
	  	,done: function(res){
	         //如果上传失败
	         if(res.code == util.SUCCESS){
	           //上传成功
	           $('#mainImgInputId').val(res.data);
	         }
	      }
	    ,error: function(){
	      //演示失败状态，并实现重传
	      var demoText = $('#demoText');
	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
	      demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });
	
	$(function(){
		// 加载一级分类
		$.ajax({
			url : "${path}/category/selectTopCategory.action",
			type : "POST",
			dataType : "json",
			success : function(jsonObj){
				console.log(jsonObj);
				// var data = jsonObj.data;
				$(jsonObj.data).each(function(i, value){
					// <option value="001">山东省</option>
					var html = "<option value='" + this.id + "'>" + this.name + "</option>";
					$("#topCategoryId").append(html);
				});
				
				form.render('select'); //刷新select选择框渲染
			}
		});
	});
	  
	  laydate.render({
		  elem: '#createTimeId'
		  ,trigger: 'click'
	  });
	  
	  laydate.render({
		  elem: '#updateTimeId'
		  ,trigger: 'click'
	  });
	  
	});
	
	function submitForm() {
		
		$.ajax({
			url : "${path}/product/insert.action",
			type : "post",
			dataType : "json",
			data : $("#ajax_form").serialize(),
			success : function(jsonObj) {
				console.log(jsonObj);
				if(jsonObj.code == util.SUCCESS) {
					mylayer.successMsg(jsonObj.msg);
					//当你在iframe页面关闭自身时
					var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					setTimeout(function(){
						parent.layer.close(index); //再执行关闭 
						// 刷新父页面
						window.parent.location.reload();
					},1000);
				} else {
					mylayer.errorMsg(jsonObj.msg);
				}
				
			}
		});
	}
	
	var myKindEditor ;
    KindEditor.ready(function(K) {
        var kingEditorParams = {
             //指定上传文件参数名称
             filePostName  : "file",
             //指定上传文件请求的url。
             uploadJson : '${path}/product/uploadImgByEditor.action',
             //上传类型，分别为image、flash、media、file
             dir : "image",
             afterBlur: function () { this.sync(); }
       }
       var editor = K.editor(kingEditorParams);
       
      //富文本编辑器
      myKindEditor = KindEditor.create('#ajax_form[name=detail]', kingEditorParams);
    });
    
</script>
</body>
</html>